.container {
  padding: 50rpx;

  .template-name,
  .desc {
    position: relative;
    display: flex;
    margin-top: 50rpx;
    image {
      position: absolute;
      left: -30rpx;
      width: 30rpx;
      height: 30rpx;
    }
    .name {
      margin-right: 30rpx;
    }

    .placeholder {
      font-size: 25rpx;
    }
  }

  .template-move {
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100rpx;
      margin-top: 50rpx;
      background: #f9dda8;
      color: #6b400d;
      border-radius: 30rpx;
      font-weight: 1000;
      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
    .hover {
      background-color: #f9dda893;
    }
    .tips {
      margin-top: 10rpx;
      margin-left: 10rpx;
      font-size: 20rpx;
      color: rgba($color: #000000, $alpha: 0.5);
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .area-item {
      display: flex;
      flex-wrap: wrap;
      .move-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10rpx;
        padding: 20rpx;
        border-radius: 20rpx;
        background-color: #f9dda869;
        image {
          width: 30rpx;
          height: 30rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
  .add {
    position: fixed;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    border-radius: 20rpx;
    font-weight: 600;
    color: #6b400d;;
    background-color: rgb(250, 235, 215);
    font-size: 50rpx;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
  .edit {
    left: 40rpx;
    width: 40%;
    transform: translateX(0);
  }
  .hover-add {
    background-color: rgb(249, 221, 168);
  }

  .cancel,
  .delete {
    position: fixed;
    bottom: 20rpx;
    right: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100rpx;
    border-radius: 20rpx;
    font-size: 25rpx;
    font-weight: 1000;
  }
  .cancel {
    right: calc(60rpx + 20% );
  }
  
}